<!DOCTYPE html>
<html lang="en">
<head>
<title>Navbar Template for Bootstrap</title>
          <?php include '../includes/header.php'; ?>
   </head>

<body>

	<div id="dialog-modal" title="Basic modal dialog"
		style="display: none;">
		<p>Adding the modal overlay screen makes the dialog look more
			prominent because it dims out the page content.</p>
	</div>

	<div class="container">
    
		<?php include 'includes/navbar.php';?>

      <!-- Main component -->
		<div class="jumbotron">
			<h1>JQGRID TEST</h1>

			<table id="userTable"></table>
			<div id="userNav"></div>
		</div>

	</div>
	<!-- /container -->
    <?php include 'includes/footer.php';?>	
	<!-- scripts -->
	<script>
	jQuery("#userTable").jqGrid({ 
		ajaxGridOptions : {type:"POST"}, 
		url:'WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW', 
		datatype: "json",
		colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], 
		colModel:[
			{name:'id',index:'id', width:55},
			{name:'invdate',index:'invdate', width:90},
			{name:'name',index:'name asc, invdate', width:100},
			{name:'amount',index:'amount', width:80, align:"right"},
			{name:'tax',index:'tax', width:80, align:"right"},
			{name:'total',index:'total', width:80,align:"right"},
			{name:'note',index:'note', width:150, sortable:false}
		], 
		rowNum:10, 
		width:700,
		rowList:[10,20,30],
		pager: '#pjqgajax', 
		sortname: 'invdate',
		viewrecords: true,
		sortorder: "desc",
		caption:"New API Example" 
	}); 

	jQuery("#userTable").jqGrid(
		'navGrid','#userNav',
		{edit:false,add:false,del:false}
	); 
    </script>
</body>
</html>
